<!-- 成为房主 -->
<template>
  <div class="F-box">
    <div class="F-Header">
      <div @click="fanhui">《返回</div>
      <div>嘿嘿</div>
      <div></div>
    </div>
    <!-- A -->
    <div class="F-MA">
      <!-- AA -->
      <div class="A-AA">房源信息</div>
      <!-- AB  -->
      <div class="A-AB">
        <div class="A-div">
          <a href="/Index">
            <div>小区名字</div>
            <span><input type="text" placeholder="请输入小区名字>" /></span>
          </a>
        </div>
        <div class="A-div">
          <div>租金</div>
          <span><input type="text" placeholder="请输入金额" /></span>
          <div>￥/月</div>
        </div>
        <div class="A-div">
          <div>建筑面积</div>
          <span><input type="text" placeholder="请输入面积" /></span>
          <div>m2</div>
        </div>
        <div class="A-div1">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="选择器"
            placeholder="点击选择城市"
            @click="showPicker = true"
          />
        </div>
        <div class="A-div2">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="选择器"
            placeholder="点击选择城市"
            @click="showPicker = true"
          />
        </div>
        <div class="A-div3">
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="选择器"
            placeholder="点击选择城市"
            @click="showPicker = true"
          />
        </div>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
    </div>
    <!-- B -->
    <div class="F-MB">
      <!-- BA -->
      <div class="B-BA">b1房源</div>
      <!-- BB -->
      <div class="B-BB">
        <input type="text" placeholder="请输入路径，房子" />
      </div>
    </div>
    <!-- C -->
    <div class="F-MC">33</div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value: "",
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      showPicker: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fanhui() {
      this.$router.push("/Many");
    },
    ///
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.F-box {
  width: 100%;
  height: auto;
  background: paleturquoise;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.F-Header {
  width: 100vw;
  height: 1rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid rgb(0, 0, 0);
}
.F-MA {
  width: 100vw;
  height: 8rem;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  font-size: 11px;
}
.A-AA {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #ccc;
  line-height: 1rem;
  padding: 0px 20px;
  color: rgb(0, 240, 180);
}
.A-AB {
  width: 100%;
  height: 5rem;
  display: flex;
  flex-direction: column;
  padding: 0px 0px 0px 20px;
}
.A-AB .A-div {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #ccc;
  // background: papayawhip;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.A-div a {
  width: 100%;
  height: 100%;
  // background: orangered;
  // border-bottom: 1px solid #ccc;
  // background: papayawhip;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.A-div a input {
  float: right;
}
.A-div div {
  width: 20%;
  // background: orange;
  height: 100%;
  text-align: center;
  line-height: 1rem;
  font-size: 10px;
}
.A-div span {
  display: block;
  background: orangered;
  width: 60%;
  height: 100%;
}
.A-div span input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}
.A-div1 {
  width: 100%;
  height: auto;
  background: palegreen;
  border-bottom: 1px solid #000;
}
.A-div2 {
  width: 100%;
  height: 2rem;
  background: rgb(232, 240, 122);
  border-bottom: 1px solid #000;
}
.A-div3 {
  width: 100%;
  height: 2rem;
  background: rgb(152, 223, 251);
  border-bottom: 1px solid #000;
}
.F-MB {
  width: 100vw;
  height: 5rem;
  background: rgb(62, 228, 228);
  font-size: 11px;
  display: flex;
  flex-direction: column;
}
.B-BA {
  width: 100%;
  height: 0.5rem;
  border-bottom: 1px solid #ccc;
  background: palegreen;
  padding: 0px 10px;
}
.B-BB {
  width: 100%;
  height: 0.8rem;
  background: pink;
}
.B-BB input {
  width: 100%;
  height: 100%;
  color: #ccc;
  outline: none;
  border: none;
  padding: 0px 10px;
}
.F-MC {
  width: 100vw;
  height: 7rem;
  background: greenyellow;
  font-size: 11px;
}
</style>